<!--
 * @Author: 曹家睿 17799623735@163.com
 * @Date: 2023-12-06 12:35:32
 * @LastEditors: zhangduo 445629906@qq.com
 * @LastEditTime: 2023-12-11 02:46:16
 * @FilePath: \mdbj-ui\src\views\mypage\roadinspection\inceptionmanager\detailPanel.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by 曹家睿, All Rights Reserved. 
-->
<template>
  <div>
    <el-row>
      <el-col :span="24" class="title-row">
        <span>| 详细信息</span>
      </el-col>
      <el-col :span="24">
        <el-row>
          <el-descriptions
            :column="2"
            border
            :contentStyle="contentStyle"
            :labelStyle="labelStyle"
            size:small
            v-if="feature"
          >
            <el-descriptions-item>
              <template slot="label"> OBJECTID </template>
              {{ feature.attributes.objectid }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 道路编码 </template>
              {{ feature.attributes.roadcode }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 道路名称 </template>
              {{ feature.attributes.roadname }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 巡查员 </template>
              {{ feature.attributes.inspector }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 巡查时间 </template>
              <!-- {{ feature.attributes.inspectiontime }} -->
              {{ dateFormat(feature.attributes.inspectiontime) }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 巡查结果 </template>
              {{ feature.attributes.inspectionresult }}
            </el-descriptions-item>
          </el-descriptions>
          <el-col :span="24" class="title-row">
            <span>| 照片资料</span>
          </el-col>
          <el-col :span="24">
            <template v-if="picFileList.length !== 0">
              <el-image
                style="width: 100px; height: 100px; margin: 10px"
                v-for="(pic, index) in picFileList"
                :key="index"
                :src="pic"
                :preview-src-list="picFileList"
              >
              </el-image>
            </template>
            <div
              v-if="picFileList.length == 0"
              style="margin: 10px; text-align: center"
            >
              暂无照片
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div class="footer">
      <el-button type="primary" plain icon="el-icon-edit" @click="handleUpdate"
        >修 改</el-button
      >
      <el-button
        type="primary"
        plain
        icon="el-icon-circle-close"
        @click="cancel"
        >关 闭</el-button
      >
    </div>
  </div>
</template>

<script>
import { getAttachList } from "../../../../api/attachment/attach";
export default {
  dicts: ["sys_roadclass_js"],
  inject: ["toggleComponent"],
  props: {
    paramObj: { default: () => {} },
    mapview: { default: () => {} },
  },
  data() {
    return {
      picFileList: [],
      tableData: [],
      activeName: "first",
      title: null,
      //   内容样式
      contentStyle: {
        "text-align": "left",
        // "min-width": "320px", //最小宽度
        "word-break": "break-all", //过长时自动换行
      },
      // label样式
      labelStyle: {
        // width: "100px",
        "text-align": "left",
        "min-width": "120px",
        width: "150px",
        // "background-color": "#e5eeff",
      },
      // 修改表单参数
      formData: {},
      feature: undefined,
      featureLayer: undefined,
    };
  },
  created() {},
  activated() {
    let _self = this;
    console.log(_self.paramObj);
    _self.feature = _self.paramObj.feature;
    _self.featureLayer = _self.paramObj.featureLayer;
    // 查询附件
    this.getAttachment();
  },
  deactivated() {
    let _self = this;
    _self.feature = undefined;
    _self.featureLayer = undefined;
  },
  methods: {
    /*日期处理*/
    dateFormat(cellValue) {
      // let date = row[column.property];
      const date = new Date(cellValue); //先把时间戳格式转化为日期格式
      //Unix时间戳以秒为单位，所以需要乘以1000 再通过moment插件 把日期格式转为自己想要的年月日格式
      let localTime = this.$moment(date).format("YYYY-MM-DD");
      return localTime;
    },
    // 修改按钮
    handleUpdate() {
      let _self = this;
      const paramObj = {
        feature: _self.feature,
        featureLayer: _self.featureLayer,
      };
      this.toggleComponent("inceptionEditPanel", paramObj);
    },
    // 查询附件
    getAttachment() {
      let _self = this;
      _self.picFileList = [];
      const attachGroupId = _self.feature.attributes.photo;
      console.log("attachGroupId:" + attachGroupId);
      getAttachList(attachGroupId).then((response) => {
        if (response.code == "200" && response.data) {
          response.data.rows.forEach((element) => {
            const prefixUrl = window.mapConfig.nodeurl + "/attachfiles/";
            var attachUrl =
              prefixUrl + element.attachId + "." + element.attachType;

            var obj = {
              id: element.attachId,
              name: element.attachName,
              url: prefixUrl + element.attachId + "." + element.attachType,
            };
            _self.picFileList.push(obj.url);
          });
        }
      });
    },
    // 关闭按钮
    cancel() {
      let _self = this;
      const paramObj = {
        roadcode: _self.feature.attributes.roadcode,
        roadname: _self.feature.attributes.roadname,
      };
      console.log("paramObj", paramObj);
      this.toggleComponent("inceptionDataPanel", paramObj);
    },
  },
};
</script>

<style lang="scss" scoped>
.title-row {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 1vh;
}
.footer {
  margin-bottom: 1vh;
  display: flex;
  justify-content: center;
}
</style>
